<template>
  <div class="rightTop2">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <a-select
      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      v-model="active"
      class="rightTop2Select"
      @select="select"
    >
      <a-select-option
        v-for="item in selectList"
        :key="item.value"
        :value="item.value"
        >{{ item.name }}</a-select-option
      >
    </a-select>
    <div class="chart" id="ledtMiddlechart"></div>
  </div>
</template>
<script>
export default {
  name: "RightTop2",
  props: {},
  components: {},
  data() {
    return {
      active: "",
      selectList: [
        { name: "站房1", value: 1 },
        { name: "站房2", value: 2 },
        { name: "站房3", value: 3 },
        { name: "站房4", value: 4 },
        { name: "站房5", value: 5 },
        { name: "站房6", value: 6 },
        { name: "站房7", value: 7 },
        { name: "站房8", value: 8 },
        { name: "站房9", value: 9 },
        { name: "站房10", value: 10 },
        { name: "站房11", value: 11 },
        { name: "站房12", value: 12 },
        { name: "站房13", value: 13 },
        { name: "站房14", value: 14 },
        { name: "站房15", value: 15 },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    select() {},
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    var myChart = this.$echarts.init(
      document.getElementById("ledtMiddlechart")
    );
    const option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        itemWidth: 40,
        itemHeight: 20,
        textStyle: {
          color: "#fff",
          fontSize: 20,
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.2)",
              width: 2,
            },
          },
          axisTick: {
            show: false,
            label: {
              color: "#fff",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 20,
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          name: "kwh",
          nameTextStyle: {
            color: "#fff",
            fontSize: 18,
          },
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            formatter: "{value}",
            fontSize: 18,
          },
        },
        {
          name: "m³",
          nameTextStyle: {
            color: "#fff",
            fontSize: 18,
          },
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            formatter: "{value}",
            fontSize: 18,
          },
        },
      ],
      series: [
        {
          name: "日能量",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2EFFBD" },
              { offset: 1, color: "#2B81FF" },
            ]),
          },
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          ],
        },
        {
          name: "日能耗",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#FCD34F" },
              { offset: 1, color: "#FF8F2B" },
            ]),
          },
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
          ],
        },
        {
          name: "吨水电耗",
          type: "line",
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value;
            },
          },
          itemStyle: {
            color: "#26A8FFFF",
          },
          data: [
            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
          ],
        },
      ],
    };

    // 绘制图表
    myChart.setOption(option);
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.rightTop2 {
  margin-top: 50px;
  position: relative;

  .chart {
    margin: 40px 0 0px;
    width: 100%;
    height: 360px;
  }
}
</style>
<style lang="less">
.rightTop2Select {
  width: 160px;
  height: 38px;
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 20px;
}
.rightTop2 {
  .ant-select-dropdown-content {
    border: 0 !important;
  }
  .ant-select-dropdown-menu {
    background: rgba(39, 61, 118, 1) !important;
  }
  .ant-select-dropdown-menu-item-active {
    background: linear-gradient(180deg, #4796d9 0%, #225db1 100%) !important;
  }
  .ant-select-dropdown {
    width: 160px;
    top: 37px !important;
    left: auto !important;
    right: 10px !important;

    .ant-select-dropdown-menu-item {
      border-bottom: 1px solid rgba(143, 179, 255, 0.16);
      background: #273d76;
      text-align: left;
      font-size: 18px;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }
}
</style>
